<template>
  <div class="HLQualityTesting">
    <div class="router-box" style=" margin-bottom: 20px;">
    <el-row :gutter="20">
      <el-col :span="12">
        <router-link :to="{name:'HLProductINfo'}">产品信息</router-link>
      </el-col>
      <el-col :span="12">
        <router-link :to="{name:'HLQualityTesting'}">质检</router-link>
      </el-col>
    </el-row>
  </div>
    <div class="search-box">
      <el-input placeholder="请输入内容" class="input-with-select">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>

    </div>

    <!-- 表格 -->
    <div class="absolute-box" style='flex:1' v-if='checklist.length>0'>
      <el-table @row-click="openDialog"
          :data="checklist"
          height="100%"
          border
          style="width: 100%;">
        <el-table-column
            prop="checkDate"
            label="日期">
        </el-table-column>
        <el-table-column
            prop="productName_N"
            label="产品">
        </el-table-column>
        <el-table-column
            prop="shuLiang"
            label="数量">
        </el-table-column>
        <el-table-column
            prop="userId"
            label="质检员">
        </el-table-column>
        <el-table-column
            prop="submitDate"
            label="提交时间">
        </el-table-column>
      </el-table>
    </div>

    <!-- 弹出form -->
    <el-dialog :title="model.productName_N" :visible.sync="dialogFormVisible">
      <el-form :model="model">
        <el-form-item label="产品">
          <el-input v-model="model.productName_N" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="数量 ">
          <el-input v-model="model.shuLiang" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="序列号">
          <br>
          <div v-for="i in model.productDetaList">
            {{i.serializeNo}}
          </div>
        </el-form-item>
        <el-form-item label="质检日期">
          <el-input v-model="model.checkDate" readonly="readonly" type="textarea "></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return{
        dialogFormVisible: false,
        checklist: {},
        model:{}
      }
    },
    created() {
      // 在模板渲染成html前调用,即通常初始化某些属性值
      this.$http.get('/mock/HLProduct/GetCheckListByCondition.json').then((response) => {
        response = response.body;
        this.checklist = response.rows;
      });
    },
    methods: {
      openDialog:function(row, event, column) {
        this.dialogFormVisible=true;
        this.model = row;
      }
    }
  }
</script>

<style>

</style>